---
description: Generate typed code for SvelteKit and Apollo. GraphQL Code Generator and the community provide typed code generation for Apollo, SvelteKit _native_, and other clients.
---

import { Callout } from '@theguild/components'

# Guide: Svelte / Kit

GraphQL Code Generator and the community provide typed code generation for Apollo, SvelteKit _native_, and other clients.

Plugins and available options vary depending on the selected codegen; for this reason, you will find guides for each of them below:

- [Svelte Apollo](#svelte-apollo)
- [SvelteKit Native](#sveltekit-native)

All the following guides query the schema below:

```graphql filename="schema.graphql"
type Author {
  id: Int!
  firstName: String!
  lastName: String!
  posts(findTitle: String): [Post]
}

type Post {
  id: Int!
  title: String!
  author: Author
}

type Query {
  posts: [Post]
}
```

## Svelte Apollo

Thank to the [community-built plugin](https://github.com/ticruz38/graphql-codegen-svelte-apollo#readme) `graphql-codegen-svelte-apollo`, GraphQL Code Generator generates full-typed Apollo GraphQL services for Svelte.

and the following reference script:

```svelte
<script lang="ts">
  import { query } from 'svelte-apollo'

  const postsQueryDocument = gql`
    query Posts {
      posts {
        id
        title
        author {
          id
          firstName
          lastName
        }
      }
    }
  `

  const posts = query(postsQueryDocument)
</script>

<!-- UI … -->
{posts.data}
```

Just a few configuration steps are required to get observable Apollo queries with Typescript typings:

**1. Install the `graphql-codegen-svelte-apollo` plugin**

```sh npm2yarn
npm i -D graphql-codegen-svelte-apollo @graphql-codegen/typescript @graphql-codegen/typescript-operations @graphql-codegen/cli typescript graphql
```

**2. Configure the plugin**

Create or update your `codegen.ts` file as follows:

```ts filename="codegen.ts"
import type { CodegenConfig } from '@graphql-codegen/cli'

const config: CodegenConfig = {
  schema: 'http://my-graphql-api.com/graphql',
  documents: './src/**/*.gql',
  generates: {
    './graphql/generated.ts': {
      plugins: ['typescript', 'typescript-operations', 'graphql-codegen-svelte-apollo']
    }
  }
}
export default config
```

<Callout>
**`schema` and `documents` values**

`schema` can be:

- your target GraphQL API URL (`"/graphql"` included)
- your SDL file. (eg: `./src/schema.graphql`)

`documents` is a glob expression to your `.graphql`, `.gql` files.

</Callout>

**3. Run the codegen and update your code**

Assuming that, as recommended, your `package.json` has the following script:

```json filename="package.json"
{
  "scripts": {
    "generate": "graphql-codegen"
  }
}
```

Running the following generates the `graphql/generated.ts` file.

```sh npm2yarn
npm run generate
```

We can now update our code as follows:

```svelte
<script lang="ts">
  import { Posts } from '../graphql/generated'

  $: posts = Posts()
  // `posts` is fully typed!
</script>

<!-- UI … -->
{$posts.data}
```

For more advanced configuration (ex: async queries), please refer to the [plugin documentation](/plugins/typescript-svelte-apollo) and the [GitHub repository README](https://github.com/ticruz38/graphql-codegen-svelte-apollo).

For a different organization of the generated files, please refer to the ["Generated files colocation"](/docs/advanced/generated-files-colocation) page.

## SvelteKit Native

![logoKitQL](https://raw.githubusercontent.com/jycouet/kitql/main/logo.svg)

With [KitQL Codegen](https://github.com/jycouet/kitql/tree/main/packages/graphql-codegen), you get SSR (Server Side Rendering) & Caching out-of-the-box with svelte stores.

Just a few configuration steps are required to get SvelteKit stores fully typed + All Operations fully typed:

**1. Install the plugin**

```sh npm2yarn
npm i @kitql/client
npm i -D @kitql/graphql-codegen
```

**2. Configure the plugin**

Create or update your `codegen.ts` file as follows:

```ts filename="codegen.ts"
import type { CodegenConfig } from '@graphql-codegen/cli'

const config: CodegenConfig = {
  schema: 'http://my-graphql-api.com/graphql',
  documents: './src/**/*.gql',
  generates: {
    './graphql/generated.ts': {
      plugins: ['typescript', 'typescript-operations', 'typed-document-node', '@kitql/graphql-codegen']
    }
  }
}
export default config
```

**3. Run the codegen and update your code**

Assuming that, as recommended, your `package.json` has the following script:

```json filename="package.json"
{
  "scripts": {
    "generate": "graphql-codegen"
  }
}
```

Running the following generates the `graphql/generated.ts` file.

```sh npm2yarn
npm run generate
```

We can now update our code as follows:

```svelte
<script context="module" lang="ts">
  import { PostsQuery } from '../graphql/generated'

  export async function load({ fetch }) {
    await PostsQuery({ fetch }) // This line do the query in SSR mode
    // now you have `PostsQueryStore` store available and fully typed!
    return {}
  }
</script>

<!-- UI … -->
{$PostsQueryStore.data}
```

For more advanced configuration, please refer to the [KitQL documentation](https://github.com/jycouet/kitql/tree/main/packages/graphql-codegen).

For a different organization of the generated files, please refer to the ["Generated files colocation"](/docs/advanced/generated-files-colocation) page.
